import React from 'react'
import './index.scss'
import PageTitle from 'component/page-title/index.jsx'
import {Link} from 'react-router-dom'
import Muntil from 'until/mm.jsx'
import Statistic from 'service/statistic-service.jsx'

const _mm=new Muntil();
const _statistic=new Statistic();


class Home extends React.Component{

    constructor(){
        super();
        this.state={
            userCount:"-",
            productCount:"-",
            orderCount:"-"
        }
    }
    componentDidMount(){
        this.loadCount();
    }

    loadCount() {
        _statistic.getHomeCount().then(res => {
            console.log(res)
            this.setState(res)
        },errMsg=>{
            _mm.errorTips(errMsg)
        })

    }
    render(){
        return(
            <div id="page-wrapper">
                <PageTitle title="首页"></PageTitle>

                <div className="row">
                    <div className="col-md-4">
                        <Link to="/user" className="color-box brown">
                            <p className="count">{this.state.userCount}</p>
                            <p className="desc">
                                <i className="fa fa-user-o"></i>
                                <span>用户总数</span>
                            </p>
                        </Link>
                    </div>
                    <div className="col-md-4">
                        <Link to="/produce" className="color-box green">
                            <p className="count">{this.state.productCount}</p>
                            <p className="desc">
                                <i className="fa fa-list"></i>
                                <span>商品总数</span>
                            </p>
                        </Link>
                    </div>
                    <div className="col-md-4">
                        <Link to="/order" className="color-box blue">
                            <p className="count">{this.state.orderCount}</p>
                            <p className="desc">
                                <i className="fa fa-check-square-o"></i>
                                <span>订单总数</span>
                            </p>
                        </Link>
                    </div>
                </div>

            </div>
        )
    }

}

export default Home;